<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
  >
    <el-menu-item index="0">
      <el-image style="width: 60px; height: 60px" :src="url" :fit="fit" />
    </el-menu-item>
    <div class="flex-grow" />
    <el-menu-item index="1" @click="$router.push('/')">首页</el-menu-item>
    <el-menu-item index="2" @click="$router.push('/see')">逛逛</el-menu-item>
    <el-menu-item index="4" style="margin-right: 350px" @click="$router.push('/mes')">消息</el-menu-item>
    <div style="margin-top: 7px;">
        <el-image style="width: 50px; height: 50px" :src="this.user.image" :fit="fit" />
    </div>
    <div style="width: 60px; margin-top: 7px;">
      <el-dropdown>
        <span class="el-dropdown-link">
          <br>{{ this.user.username }}<br><br>
          <el-icon class="el-icon--right">
            <arrow-down/>
          </el-icon>
        </span>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item  @click="$router.push('/person')">个人信息</el-dropdown-item>
                <el-dropdown-item  @click="$router.push('/publish')">我发布的</el-dropdown-item>
                <el-dropdown-item  @click="$router.push('/buy')">我购买的</el-dropdown-item>
                <el-dropdown-item @click="logout">退出系统</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
  </div>
  </el-menu>
</template>

<script>
import { ref, } from 'vue'
import {ArrowDown,} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import request from '../utils/request';

let socket;

export default {

  data(){
    return{
      user: {},
      token: sessionStorage.getItem("token"),
      fit : 'scale-down',
      url : '/OIP-C.jfif/',
      activeIndex : ref('1'),
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      user: {},
      isCollapse: false,
      users: [],
      chatUser: '',
      text: "",
      messages: [],
      content: ''
    }
  },
  methods:{
    getInfo(){
      // let str = sessionStorage.getItem("user") || "{}"
      // this.user = JSON.parse(str)
      this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {}
      let username = this.user.id;
      console.log(this.user.username)
      let _this = this;
      let socketUrl = "ws://localhost:8081/imserver/" + username;
        if (socket != null) {
          socket.close();
          socket = null;
        }
        // 开启一个websocket服务
        socket = new WebSocket(socketUrl);
        //打开事件
        socket.onopen = function () {
          console.log("websocket已打开");
        };
        //  浏览器端收消息，获得从服务端发送过来的文本消息
        socket.onmessage = function (msg) {
          console.log("收到数据====" + msg.data)
          let data = JSON.parse(msg.data)  // 对收到的json数据进行解析， 类似这样的： {"users": [{"username": "zhang"},{ "username": "admin"}]}
          if (data.users) {  // 获取在线人员信息
            _this.users = data.users.filter(user => user.username !== username)  // 获取当前连接的所有用户信息，并且排除自身，自己不会出现在自己的聊天列表里
          } else {
            // 如果服务器端发送过来的json数据 不包含 users 这个key，那么发送过来的就是聊天文本json数据
            //  // {"from": "zhang", "text": "hello"}
            if (data.from === _this.chatUser) {
              _this.messages.push(data)
              // 构建消息内容
              _this.createContent(data.from, null, data.text)
            }
          }
        };
        //关闭事件
        socket.onclose = function () {
          console.log("websocket已关闭");
        };
        //发生了错误事件
        socket.onerror = function () {
          console.log("websocket发生了错误");
        }
    },
    logout(){
      sessionStorage.removeItem("token")
      sessionStorage.removeItem("user")
      ElMessage({
            type: "success",
            message: "退出成功"
      })
      this.$router.push('/login')
    },
  },
  created(){
    this.getInfo()
  },
}

// const fit = 'scale-down'
// const url =
//   '/OIP-C.jfif/'
// const activeIndex = ref('1')
// const handleSelect = (key: string, keyPath: string[]) => {
//   console.log(key, keyPath)
// }


</script>

<style>
.flex-grow {
  flex-grow: 1;
}
.el-dropdown-link {
        cursor: pointer;
        color: var(--el-color-primary);
        display: flex;
        align-items: center;

    }
</style>

